<template>
  <div class="element-pagination-demo">
    <el-table :data="paginatedData" class="el-table">
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column prop="name" label="Name" width="120"></el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="tableData.length"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const tableData = ref([
  { id: 1, name: 'John' },
  { id: 2, name: 'Tom' },
  { id: 3, name: 'Jerry' },
  { id: 4, name: 'Lily' },
  { id: 5, name: 'Lucy' },
  { id: 6, name: 'Mary' },
  { id: 7, name: 'Mike' },
  { id: 8, name: 'Lisa' },
  { id: 9, name: 'Bob' },
  { id: 10, name: 'Alice' },
  { id: 11, name: 'Kate' },
  { id: 12, name: 'Tom' },
  { id: 13, name: 'Jerry' },
  { id: 14, name: 'Lily' },
  { id: 15, name: 'Lucy' },
  { id: 16, name: 'Mary' },
  { id: 17, name: 'Mike' },
  { id: 18, name: 'Lisa' },
  { id: 19, name: 'Bob' },
  { id: 20, name: 'Alice' },
  { id: 21, name: 'Kate' },
  { id: 22, name: 'Tom' },
  { id: 23, name: 'Jerry' },
  { id: 24, name: 'Lily' },
  { id: 25, name: 'Lucy' },
  { id: 26, name: 'Mary' },
  { id: 27, name: 'Mike' },
  { id: 28, name: 'Lisa' },
  { id: 29, name: 'Bob' },
  { id: 30, name: 'Alice' },
  { id: 31, name: 'Kate' },
  { id: 32, name: 'Tom' },
  { id: 33, name: 'Jerry' },
  { id: 34, name: 'Lily' },
  { id: 35, name: 'Lucy' },
  { id: 36, name: 'Mary' },
  { id: 37, name: 'Mike' },
  { id: 38, name: 'Lisa' },
  { id: 39, name: 'Bob' },
  { id: 40, name: 'Alice' },
  { id: 41, name: 'Kate' },
  { id: 42, name: 'Tom' },
  { id: 43, name: 'Jerry' },
  { id: 44, name: 'Lily' },
  { id: 45, name: 'Lucy' },
  { id: 46, name: 'Mary' },
  { id: 47, name: 'Mike' },
  { id: 48, name: 'Lisa' },
  { id: 49, name: 'Bob' },
  { id: 50, name: 'Alice' },
  { id: 51, name: 'Kate' },
]);
const currentPage = ref(1); // 当前页
const pageSize = ref(10); // 每页显示的条数

const paginatedData = computed(() => {
  //计算当前页的起始索引
  const start = (currentPage.value - 1) * pageSize.value;
  //计算当前页的结束索引
  const end = start + pageSize.value;
  //返回当前页的数据
  return tableData.value.slice(start, end);
});

const handleCurrentChange = newCurrentPage => {
  console.log('当前页：', newCurrentPage);
  //更新当前页
  currentPage.value = newCurrentPage;
};
</script>

<style lang="scss" scoped>
.element-pagination-demo {
  .el-table {
    width: 50%;
  }
}
</style>
